<script>
import  {getBannerListFn,updateBanner,delBanner} from "@/api/banner";
import { ElMessage } from 'element-plus'
export default{
    data(){
        return{
            bannerList:[],
            currentPage:1
        }
    },
    mounted() {
        getBannerListFn().then(res=>{
            if(res.code==200){
                console.log(res);
                this.bannerList=res.data
                console.log('获取轮播图列表成功！');
            }else{
                console.log('获取轮播图列表失败！');
            }
        })
    },
    computed:{
        tableData(){
            return this.bannerList.slice((this.currentPage-1)*10, (this.currentPage-1)*10+10)
        }
    },
    methods:{
        changeflag(row){
            updateBanner({
                bannerid:row.bannerid,
                flag:row.flag
            }).then(res=>{
                if(res.code=200){
                    ElMessage.success(res.message)
                }else{
                    ElMessage.error(res.message)
                }
            })
        },

        delBanner(row){
            delBanner({bannerid:row.bannerid}).then(res=>{
                if(res.code==200){
                    ElMessage.success(res.message)
                    getBannerListFn().then(res=>{
                        this.bannerList=res.data
                    })
                }else{
                    ElMessage.error('温馨提示'+res.message)
                }
            })
        }
    }

}
</script>
<template>
    <h4>轮播图列表</h4>
     <!-----------------表格数据渲染--------------------->
    <el-table :data="tableData  ">
        <el-table-column type="index" label="序号">
            <template #default="scope">
            <div> 
               {{(currentPage-1)*10+1+ scope.$index }} 
            </div>
        </template>
        </el-table-column>
        <el-table-column prop="img" label="图片">
        <template #default="{row}">
              <el-image style="width:100px; height:100px" :src="row.img"></el-image>
        </template>
        </el-table-column>
        <el-table-column prop="alt" label="提示信息"></el-table-column>
        <el-table-column prop="link" label="链接"></el-table-column>
        <el-table-column prop="flag" label="是否显示">  
        <template #default="{row}">
                <el-switch v-model="row.flag" @change="changeflag(row)" />
        </template>
        </el-table-column>
        <el-table-column label="操作">
        <template #default="{row}">
            <el-popconfirm :disabled="$store.state.userInfo.role==1"  @confirm="delBanner(row)" confirm-button-text="确定" cancel-button-text="取消" title="你确定要删除这个轮播图吗?" >
            <template #reference>
                <el-button type="danger" :disabled="$store.state.userInfo.role==1">删除</el-button>
            </template>
        </el-popconfirm>        
        </template>
        </el-table-column>
    </el-table>

    <!-- ------------------分页--------------- -->
    <el-pagination  v-model:current-page="currentPage" background layout="prev, pager, next" :total="bannerList.length"  />
</template>